<template>
  <view class="flex-1 flex flex-col flex-col-center-center" :class="type === 'unconfigured' ? 'unconfigured-bg' : 'white-bg'" style="height: 100%;">
    <!-- 未配置状态 -->
    <template v-if="type === 'unconfigured'">
      <tm-result
        :showBtn="false"
        status="empty"
        title="办事流程未配置"
        subTitle=" "
      />
      <tm-text
        :font-size="28"
        color="grey"
        _class="text-align-center"
        label="请前往资产云pc端，"
      />
      <tm-text
        :font-size="28"
        color="grey"
        _class="text-align-center"
        label="按照资产管理内控制要求配置单位内部流程。"
      />
    </template>

    <!-- 草稿箱保存状态和提交成功状态共用的UI结构 -->
    <template v-else>
      <view class="icon-wrapper">
        <image
          v-if="type === 'draft'"
          src="/static/draft.svg"
          class="status-icon draft-icon"
          mode="aspectFit"
        />
        <image
          v-else-if="type === 'success'"
          src="/static/success.svg"
          class="status-icon"
          mode="aspectFit"
        />
      </view>
      <tm-text
        :font-size="32"
        color="#000"
        _class="text-align-center mt-24 fw-bold"
        :label="type === 'draft' ? subTitle : title"
      />
      <tm-text
        :font-size="28"
        color="grey"
        _class="text-align-center mt-12"
        :label="type === 'draft' ? descripiton2 : descripiton"
      />
      <!-- 底部按钮 -->
      <view class="btn-group mt-24">
        <tm-button
          :shadow="0"
          size="large"
          @click="handleView"
        >
          {{ type === 'draft' ? '查看草稿' : '查看办事' }}
        </tm-button>
        <tm-button
          :shadow="0"
          size="large"
          text
          color="grey"
          @click="handleBackHome"
        >
          返回首页
        </tm-button>
      </view>
    </template>
  </view>
</template>

<script lang="ts" setup>
const props = defineProps({
  // 状态类型：unconfigured-未配置，draft-草稿箱保存，success-提交成功
  type: {
    type: String,
    default: 'unconfigured'
  },
  // 成功标题
  title: {
    type: String,
    default: '提交成功'
  },
  // 草稿标题
  subTitle: {
    type: String,
    default: '已存储为草稿'
  },
  //成功描述
  descripiton: {
    type: String,
    default: '已提交办事，可在办事-已发起中查看'
  },
  //草稿描述
  descripiton2: {
    type: String,
    default: '可在办事-草稿中-查看'
  },
})
const handleView = () => {
  if (props.type === 'draft') {
    // 跳转到草稿箱
    uni.switchTab({
      url: '/pages/work/work'
    })
  } else if (props.type === 'success') {
    // 跳转到已发起
    uni.switchTab({
      url: '/pages/work/work'
    })
  }
}

const handleBackHome = () => {
  uni.switchTab({
    url: '/pages/index/index'
  })
}
</script>

<style lang="scss" scoped>
.icon-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 120rpx;
  height: 120rpx;
}

.status-icon {
  width: 100%;
  height: 100%;
}

.draft-icon {
  transform: rotate(180deg);
  filter: invert(31%) sepia(97%) saturate(1265%) hue-rotate(206deg) brightness(97%) contrast(97%);
}

.mt-24 {
  margin-top: 24rpx;
}

.mt-12 {
  margin-top: 12rpx;
}
.fw-bold {
  font-weight: bolder;
}
.unconfigured-bg {
  background-color: #F3F3F3;
}

.white-bg {
  background-color: #FFFFFF;
}
</style>
